<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

<html>

	<head>

		<title>0x2A : Demos</title>

		<style>

			body						{
						background-color	:	#05133b;
			}

			.headline 						{
						z-index				:	25;
						background-color	:	#1e4d9e;
						position			:	absolute;
						width				:	100%;
						top					:	0px;
						left				:	0px;
						border-top			:	2px solid;
						border-bottom		:	2px solid;
						border-color		:	#1e4d9e;
			}

			.subheadline 					{
						z-index				:	25;
						position			:	absolute;
						top					:	34px;
						right				:	0px;
						border-color		:	#46B356;
			}

			.button						{
						float				:	left;
						position			:	relative;
						background-color	:	#1e4d9e;
						width				:	80px;
						height				:	30px;
						line-height			:	30px;
						vertical-align		:	middle;
						text-align			:	center;
						color				:	white;
						font-size			:	15px;
						font-weight			:	bold;
						font-family			:	Verdana, Geneva, sans-serif;
						cursor				:	pointer;
			}

			.button:hover				{
						background-color	:	#3e76d6;
			}

			.right						{
						opacity				:	0.7;
						background-color	:	#588CF5;
						font-weight			:	normal;
			}

			.right:hover				{
						opacity				:	1.0;
						background-color	:	#EB7575;
			}

			.home						{
						float				:	right;
						position			:	relative;
						width				:	30px;
						height				:	30px;
			}

			.icon						{
						max-width			:	100%;
						max-height			:	100%;
			}

			.displaypanel				{
						position			:	relative;
						top					:	36px;
						color				:	#D1E0FF;
						font-family			:	verdana;
						font-size			:	16px;
			}

		</style>

	</head>

	<body
		link  = "#045904"
		vlink = "#304030"
		alink = "#51A651"
	>

		<div class = "headline">

			<a href = "articles.html">
				<div class = "button">
					Articles
				</div>
			</a>

			<a href = "demos.html">
				<div class = "button">
					Demos
				</div>
			</a>

			<a href = "https://0x2a.pb.online/">
				<div class = "button">
					Designs
				</div>
			</a>

			<a href = "index.html">
				<div class = "home">
					<img
						class = "icon"
						src   = "home-icon.png"
					>
				</div>
			</a>

		</div>

		<div class = "subheadline">

			<div>
				<div class   = "button right"
					 type    = "button" 
					 onclick = "
					 			setDisplayFrameURL('./demo_projects/fireworkdemo.html');
					 			setDescriptionText('Click to launch fireworks...');
					 		   "
				>
					Firework
				</div>
			</div>

			<div>
				<div class   = "button right"
					 type    = "button" 
					 onclick = "
					 			setDisplayFrameURL('./demo_projects/bubbledemo.html');
					 			setDescriptionText('Drag to generate bubbles...');
					 		   "
				>
					Bubble
				</div>
			</div>

			<div>
				<div class   = "button right"
					 type    = "button" 
					 onclick = "
					 			setDisplayFrameURL('./demo_projects/heartdemo.html');
					 			setDescriptionText('Hold to pop out hearts...');
					 		   "
				>
					Heart
				</div>
			</div>

			<div>
				<div class   = "button right"
					 type    = "button" 
					 onclick = "
					 			setDisplayFrameURL('./demo_projects/lanterndemo.html');
					 			setDescriptionText('Lanterns will arrange according to inputs...');
					 		   "
				>
					Lantern
				</div>
			</div>

			<div>
				<div class   = "button right"
					 type    = "button" 
					 onclick = "
					 			setDisplayFrameURL('./demo_projects/tracking.js-master/TEAM MEMBERS _ Teamwebsite.html');
					 			setDescriptionText('Hats are automatically placed onto the profile pictures...');
					 		   "
				>
					Hats
				</div>
			</div>

		</div>

		<div class = displaypanel>

			<iframe
				id          = "displayFrame"
				src         = "./demo_projects/fireworkdemo.html"
				frameBorder = "0"
				width       = "100%"
				height      = "500px"
			>		
			</iframe>

			<label id = "descriptionText"> 
				Click to launch fireworks...
			</label> 

		</div>

	</body>

	<script>

		function setDescriptionText(text) {
			document.getElementById('descriptionText').innerHTML = text;
		}

		function setDisplayFrameURL(url){
			document.getElementById('displayFrame').src = url;
		}

	</script>
	
</html>